import React from 'react'
// import Contents from '../../components/Contents/Contents';
// import Remarkbar from '../../components/Remarkbar/Remarkbar';
import Remarks from '../../components/Remarks/Remarks';
import Topbar from '../../components/Topbar/Topbar';
import './Details.css'

class Details extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      confession: this.props.location.state.confession,
      remarkcontent:'',
      userid:localStorage.getItem('userid'),
      username:localStorage.getItem('username'),
      userimage:localStorage.getItem('userimage')
    };
  }

  componentDidMount() {
    //获取用户的头像和昵称
    fetch(`https://www.prebeauty.work/user/${this.state.confession.userid}`, {
      method: 'GET',
      headers: {
        'content-type': 'application/json'
      }
    }).then((res) => {
      if (res.status === 200) {
        res.json().then((data) => {
          this.setState({
            confname: data[0].name,
            confimg: data[0].image
          })
        })
      } else {
        alert("出现一个问题");
      }
    })

    //获取用户是否喜欢
    fetch(`https://www.prebeauty.work/clike/${this.state.userid}&${this.state.confession.id}`, {
      method: 'GET',
      headers: {
        'content-type': 'application/json'
      }
    }).then((res) => {
      if (res.status === 200) {
        res.json().then((data) => {
          this.setState({
            dolike: data[0] ? true : false
          })
          console.log(this.state.dolike)
        })
      } else {
        alert("出现一个问题");
      }
    })

    //获取评论
    fetch(`https://www.prebeauty.work/remark/${this.state.confession.id}`, {
      method: 'GET',
      headers: {
        'content-type': 'application/json'
      }
    }).then((res) => {
      if (res.status === 200) {
        res.json().then((data) => {
          this.setState({
            remarks: data
          })
          console.log(this.state.remarks)
        })
      } else {
        alert("出现一个问题");
      }
    })

  }

  tolike() {
    console.log('点赞')
    this.setState({
      dolike: true
    })
    this.state.confession.likesnum++

    //添加本条点赞
    fetch(`https://www.prebeauty.work/clike/${this.state.userid}&${this.state.confession.id}`, {
      method: 'POST',
      headers: {
        'content-type': 'application/json'
      }
    }).then((res) => {
      if (res.status === 200) {
        res.json().then((data) => {
          console.log('clike 点赞！')
        })
      } else {
        alert("出现一个问题");
      }
    })

    const param = {
      likesnum: this.state.confession.likesnum
    }

    //confession表中的likesnum+1
    fetch(`https://www.prebeauty.work/confession/${this.state.confession.id}`, {
      method: 'PUT',
      body: JSON.stringify(param),
      headers: {
        'content-type': 'application/json'
      }
    }).then((res) => {
      if (res.status === 200) {
        res.json().then((data) => {
          console.log('confession likesnum 点赞！')
        })
      } else {
        alert("出现一个问题");
      }
    })
  }

  dellike() {
    console.log('取消点赞')
    this.setState({
      dolike: false
    })
    this.state.confession.likesnum--

    //取消本条点赞
    fetch(`https://www.prebeauty.work/clike/${this.state.userid}&${this.state.confession.id}`, {
      method: 'DELETE',
      headers: {
        'content-type': 'application/json'
      }
    }).then((res) => {
      if (res.status === 200) {
        res.json().then((data) => {
          console.log('clike 取消点赞！')
        })
      } else {
        alert("出现一个问题");
      }
    })

    const param = {
      likesnum: this.state.confession.likesnum
    }
    //confession表中的likesnum-1
    fetch(`https://www.prebeauty.work/confession/${this.state.confession.id}`, {
      method: 'PUT',
      body: JSON.stringify(param),
      headers: {
        'content-type': 'application/json'
      }
    }).then((res) => {
      if (res.status === 200) {
        res.json().then((data) => {
          console.log('confession likesnum 取消点赞！')
        })
      } else {
        alert("出现一个问题");
      }
    })
  }

  inputchange(e) {
    this.setState({
      remarkcontent: e.target.value
    })
  }

  pushRemark() {
    if (this.state.remarkcontent == '') {
      alert('请输入内容！')
    } else {
      const date = new Date()
      const month = date.getMonth() + 1
      const time = date.getFullYear() + '-' + month + '-' + date.getDate() + '-' + date.getHours() + ':' + date.getMinutes()
      const param1 = {
        content: this.state.remarkcontent,
        time: time
      }
      this.state.confession.remarksnum++
      const param2 = {
        remarksnum:this.state.confession.remarksnum
      }
      
      fetch(`https://www.prebeauty.work/remark/${this.state.userid}&${this.state.confession.id}`, {
        method: 'POST',
        body: JSON.stringify(param1),
        headers: {
          'content-type': 'application/json'
        }
      }).then((res) => {
        if (res.status === 200) {
          res.json().then((data) => {
            console.log('评论！')
            //更新本地评论
            this.setState({
              remarks:[...this.state.remarks,data.data]
            })
          })
        } else {
          alert("出现一个问题");
        }
      })

      //confession表中的remarksnum+1
      fetch(`https://www.prebeauty.work/confession/${this.state.confession.id}`,{
        method:'PUT',
        body:JSON.stringify(param2),
        headers:{
            'content-type': 'application/json'
        }
      }).then((res)=>{
        if(res.status===200){
            res.json().then((data)=> {
                console.log('confession remarksnum 评论！')
            })
        }else {
            alert("出现一个问题");
        }
    })
    //清空输入框
    document.getElementsByClassName('remarkbarinput').value=""
    }
  }

  render() {
    return (
      <div className="Details">
        <Topbar name="详情页" color='#CD8C95' />

        {/* 内容区 */}
        <div style={{ width: '90%', margin: 'auto', position: 'relative' }}>
          <img className="confessionimg" src={this.state.confimg} />
          <p className="confessionname">{this.state.confname}</p><br />
          <div className="confessioncontent">
          <label>相遇时间：</label>
          <p>{this.state.confession.time}</p>
          <label>相遇地点：</label>
          <p>{this.state.confession.local}</p>
          <label>联系方式：</label>
          <p>{this.state.confession.tel}</p>
          <label>心动描述：</label>
          <p>{this.state.confession.description}</p>
          <label>再遇心愿：</label>
          <p>{this.state.confession.hope}</p>

          </div>
          
          <div style={{ height: 20 }}></div>

          {
            this.state.dolike
              ? <i className="iconfont icon-w_aixin" style={{ color: '#CD8C95', position: 'absolute', bottom: '0px', right: '16%' }} onClick={localStorage.getItem('token')?this.dellike.bind(this):()=>console.log('请先进行登录！')}></i>
              : <i className="iconfont icon-aixin" style={{ color: '#CD8C95', position: 'absolute', bottom: '0px', right: '16%' }} onClick={localStorage.getItem('token')?this.tolike.bind(this):()=>console.log('请先进行登录！')}></i>
          }
          <span style={{ color: '#CD8C95', position: 'absolute', bottom: '0px', right: '12%' }}>{this.state.confession.likesnum}</span>
          <i className="iconfont icon-53pinglun-" style={{ color: '#CD8C95', position: 'absolute', bottom: '0px', right: '4%' }} ></i>
          <span style={{ color: '#CD8C95', position: 'absolute', bottom: '0px', right: '0%' }}>{this.state.confession.remarksnum}</span>
          {/* <i className="iconfont icon-fenxiang" style={{ color: '#CD8C95', position: 'absolute', bottom: '0px', right: '0%' }}></i> */}
        </div>

        {/* 评论区 */}
        <div className="remarktitle">评论区</div>
        <div className="remarkdiv">
          {
            this.state.remarks?.map((remark) =>
              <Remarks remark={remark} key={remark.id}/>
            )
          }
        </div>

        {/* 评论 <Remarkbar color="#CD8C95" confessionid={this.state.confession.id} remarkcontent={this.state.remarkcontent} /> */}
        <div className="remarkbar">
          <div className="iconfont icon-liaotian"></div>
          <input className="remarkbarinput" type="text" onChange={this.inputchange.bind(this)}></input>
          <input className="remarkbarbutton" type="button" value="发送" onClick={localStorage.getItem('token')?this.pushRemark.bind(this):()=>console.log('请先进行登录！')}></input>
        </div>

      </div>
    )
  }
}

export default Details